<template>

  <div class="wrapper">
    <div class="icon"
         v-for="item of iconList"
         :key="item.id"
    >
      <div class="icon-img">
        <img class="img"
             :src="item.imgUrl"
             :class="[item.color]"
        >
      </div>
      <div class="icon-desc">{{item.desc}}</div>
    </div>
  </div>
</template>

<script>
  import tj from '../../../assets/images/tj.png'
  import qz from '../../../assets/images/qz.png'
  import wq from '../../../assets/images/wq.png'
  import ly from '../../../assets/images/ly.png'

  export default {
    name: 'homeCatalog',
    props:{
      iconList: Array
    },
    data() {
      return {
        red: 'red',//定义颜色
        orange: 'orange',
        green: 'green',
        blue: 'blue',
        // iconList: [
        //   {
        //     id: '00001',
        //     imgUrl: tj,
        //     desc: '本地热推',
        //     color: 'green'
        //   },
        //   {
        //     id: '00002',
        //     imgUrl: qz,
        //     desc: '亲子游',
        //     color: 'orange'
        //   },
        //   {
        //     id: '00003',
        //     imgUrl: wq,
        //     desc: '温泉热卖',
        //     color: 'blue'
        //   },
        //   {
        //     id: '00004',
        //     imgUrl: ly,
        //     desc: '主题公园',
        //     color: 'red'
        //   }
        // ]
      }
    }
  }
</script>


<style lang="stylus" scoped>
  .wrapper
    background: #fff
    width: 100%
    padding-top: .2rem

  .icon
    width: 25%
    float: left

  .img
    padding: .1rem
    width: 40%
    display: block
    background: red
    border-radius: 1rem
    margin: 0 auto

  .red
    background: #fd6266

  .orange
    background: #fda424

  .green
    background: #6dcf16

  .blue
    background: #41a9f2

  .icon-desc
    text-align: center
    padding-top: .2rem
    padding-bottom: .4rem

</style>
